<template>
  <transition name="mini">
    <div
      class="mini-player"
      v-show="!fullScreen"
      @click="showNormalPlayer"
    >
      <div class="cd-wrapper">
        <div
          ref="cdRef"
          class="cd"
        >
          <img
            ref="cdImageRef"
            width="40"
            height="40"
            :src="currentSong.pic"
            :class="cdCls"
          >
        </div>
      </div>
      <div
        ref="sliderWrapperRef"
        class="slider-wrapper"
      >
        <div class="slider-group">
          <div
            class="slider-page"
            v-for="song in playlist"
            :key="song.id"
          >
            <h2 class="name">{{song.name}}</h2>
            <p class="desc">{{song.singer}}</p>
          </div>
        </div>
      </div>
      <div class="control">
        <progress-circle
          :radius="32"
          :progress="progress"
        >
          <i @click.stop="togglePlay" class="icon-mini icon iconfont" :class="miniPlayIcon"></i>
        </progress-circle>
      </div>
      <div class="control" @click.stop="showPlaylist">
        <i class="icon iconfont icon-playlist"></i>
      </div>
      <Playlist ref="playlistRef"></Playlist>
    </div>
  </transition>
</template>

<script>
  import { useStore } from 'vuex'
  import { ref, computed } from 'vue'
  import useCD from '@/components/player/use-cd'
  import ProgressCircle from './progress-circle'
  import useMinSlider from '@/components/player/use-mini-slider'
  import Playlist from './playlist'

  export default {
    name: 'mini-player',
    components: {
      ProgressCircle,
      Playlist
    },
    props: {
      progress: {
        type: Number,
        default: 0
      },
      togglePlay: Function
    },
    setup() {
      const playlistRef = ref(null)
      const store = useStore()
      const fullScreen = computed(() => store.state.fullScreen)
      const currentSong = computed(() => store.getters.currentSong)
      const playing = computed(() => store.state.playing)
      const playlist = computed(() => store.state.playlist)

      const { cdCls, cdRef, cdImageRef } = useCD()
      const { sliderWrapperRef } = useMinSlider()

      const miniPlayIcon = computed(() => {
        return playing.value ? 'icon-mini-nb-pause' : 'icon-mini-nb-play'
      })

      function showNormalPlayer() {
        store.commit('setFullScreen', true)
      }

      function showPlaylist() {
        playlistRef.value.show()
      }

      return {
        playlistRef,
        fullScreen,
        currentSong,
        playlist,
        showNormalPlayer,
        showPlaylist,
        // cd
        cdCls,
        cdRef,
        cdImageRef,
        sliderWrapperRef,
        miniPlayIcon
      }
    }
  }
</script>

<style lang="scss" scoped>
.mini-player {
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 180;
  width: 100%;
  height: 60px;
  background: #333;
  .cd-wrapper {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0 10px 0 20px;
    .cd {
      height: 100%;
      width: 100%;
      img {
        border-radius: 50%;
        &.playing {
          animation: rotate 10s linear infinite;
        }
        &.pause {
          animation-play-state: paused;
        }
      }
    }
  }
  .slider-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    line-height: 20px;
    overflow: hidden;
    .slider-group {
      position: relative;
      overflow: hidden;
      white-space: nowrap;
      .slider-page {
        display: inline-block;
        width: 100%;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        .name {
          margin-bottom: 2px;
          margin-top: 6px;
          @include no-wrap();
          font-size: 14px;
          color: #fff;
        }
        .desc {
          @include no-wrap();
          font-size: 12px;
          color: rgba(255, 255 ,255 ,.3);
        }
      }
    }
  }
  .control {
    flex: 0 0 30px;
    width: 30px;
    padding: 0 10px;
    .icon-playlist {
      position: relative;
      top: -2px;
      font-size: 28px;
      color: $theme-color-bold;
    }
    .icon-mini {
      position: absolute;
      left: 0;
      top: 0;
      color: $theme-color-a;
      font-size: 32px;
    }
    .icon-mini-nb-play {
      left: 1px;
    }
  }
  &.mini-enter-active, &.mini-leave-active {
    transition: all 0.6s cubic-bezier(0.45, 0, 0.55, 1);
  }
  &.mini-enter-from, &.mini-leave-to {
    opacity: 0;
    transform: translate3d(0, 100%, 0)
  }
}
</style>
